<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>修改密码</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 500px;
            margin: 0 auto;
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
            color: #555;
        }
        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        .form-group input:focus {
            border-color: #667eea;
            outline: none;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        .btn {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 4px;
            background-color: #667eea;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .btn:hover {
            background-color: #5a6ecb;
        }
        .error {
            color: #ff4444;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>修改密码</h2>
    <form id="changePasswordForm" action="${pageContext.request.contextPath}/user/xiugaimima" method="post">

        <input type="hidden" id="user_id" name="user_id" value="${sessionScope.user.user_id}">

        <div class="form-group">
            <label for="oldPassword">原密码</label>
            <input type="password" id="oldPassword" name="u_pass" required>
            <span class="error" id="oldPasswordError"></span>
        </div>
        <div class="form-group">
            <label for="newPassword">新密码</label>
            <input type="password" id="newPassword" name="newPassword" required>
            <span class="error" id="newPasswordError"></span>
        </div>
        <div class="form-group">
            <label for="confirmPassword">确认新密码</label>
            <input type="password" id="confirmPassword" name="confirmPassword" required>
            <span class="error" id="confirmPasswordError"></span>
        </div>
        <button type="submit" class="btn">提交</button>
    </form>
</div>

<script>
    // 判断用户是否为空
    if (${empty user}) {
        if (window.top !== window.self) {
            window.top.location.href = '${pageContext.request.contextPath}/luyou/login'; // 跳出 iframe 并跳转到登录页面
        } else {
            window.location.href = '${pageContext.request.contextPath}/luyou/login'; // 直接跳转到登录页面
        }
    }
    // 表单提交处理
    document.getElementById('changePasswordForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const oldPassword = document.getElementById('oldPassword').value;
        const newPassword = document.getElementById('newPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;

        // 清空错误提示
        document.querySelectorAll('.error').forEach(el => {
            el.style.display = 'none';
        });

        // 验证原密码是否为空
        if (!oldPassword) {
            document.getElementById('oldPasswordError').textContent = '原密码不能为空';
            document.getElementById('oldPasswordError').style.display = 'block';
            return;
        }

        // 发送AJAX请求验证原密码
        const xhr = new XMLHttpRequest();
        xhr.open('POST', '${pageContext.request.contextPath}/user/verifyPassword', false); // 同步请求
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send('oldPassword=' + encodeURIComponent(oldPassword));
        
        if (xhr.status === 200) {
            console.log(xhr.responseText);
            const response = JSON.parse(xhr.responseText);
            if (!response.valid) {
                document.getElementById('oldPasswordError').textContent = '原密码错误';
                document.getElementById('oldPasswordError').style.color = '#ff4444';
                document.getElementById('oldPasswordError').style.display = 'block';
                return; // 阻止提交
            }
        }

        // 验证新密码和确认密码是否一致
        if (newPassword !== confirmPassword) {
            document.getElementById('confirmPasswordError').textContent = '新密码与确认密码不一致';
            document.getElementById('confirmPasswordError').style.display = 'block';
            return;
        }

        // 验证新密码是否与原密码相同
        if (newPassword === oldPassword) {
            document.getElementById('newPasswordError').textContent = '新密码不能与原密码相同';
            document.getElementById('newPasswordError').style.display = 'block';
            return;
        }

        // 所有验证通过，提交表单
        this.submit();
    });
</script>
</body>
</html>
